<template>
    <section>
        <div style="margin-bottom:5px;">
            <el-button type="primary" icon="plus" @click="openAddDialog">添加</el-button>
            <el-button type="primary" icon="plus" @click="openRootDialog">添加根菜单</el-button>
            <el-button type="primary" icon="delete" @click="handleDelete">删除</el-button>

        </div>
        <el-row>
            <el-col :span="8" style='margin-top:15px;'>
                <el-input
                        placeholder="输入关键字进行过滤"
                        v-model="filterText">
                </el-input>
                <el-tree
                        class="filter-tree"
                        :data="treeData"
                        node-key="id"
                        highlight-current
                        :props="defaultProps"
                        :filter-node-method="filterNode"
                        ref="menuTree"
                        @node-click="getNodeData"
                        default-expand-all
                >
                </el-tree>
            </el-col>
            <el-col :span="16" style='margin-top:15px;'>
                <div v-if="dialogFormVisibleAdd">
                    <el-card class="box-card">
                        <el-form label-width="100px" :rules="formAddRules" :model="formAdd" ref="formAdd">
                            <el-row>
                                <el-col :span=12>
                                    <el-form-item label="编码" prop="code">
                                        <el-input v-model="formAdd.code" style="width: 100%"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span=12>
                                    <el-form-item label="名称" prop="name">
                                        <el-input v-model="formAdd.name" style="width: 100%"></el-input>
                                    </el-form-item>
                                </el-col>

                            </el-row>


                            <el-row>
                                <el-col :span=12>
                                    <el-form-item label="类型" prop="resourceType">
                                        <el-select v-model="formAdd.resourceType" placeholder="请选择">
                                            <el-option
                                                    key="MENU"
                                                    label="菜单"
                                                    value="MENU">
                                            </el-option>
                                            <el-option
                                                    key="BUTTON"
                                                    label="按钮"
                                                    value="BUTTON">
                                            </el-option>
                                            <el-option
                                                    key="URL"
                                                    label="URL"
                                                    value="URL">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span=12>
                                    <el-form-item label="父菜单" prop="parentId">
                                        <el-input v-model="formAdd.parentName" style="width: 85%"
                                                  :disabled="true"></el-input>
                                        <span class="select" @click="selectDialog">选择</span>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row>
                                <el-col :span=12>
                                    <el-form-item label="前端路由" prop="frontRoute">
                                        <el-input v-model="formAdd.frontRoute" style="width: 100%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span=12>
                                    <el-form-item label="描述" prop="description">
                                        <el-input v-model="formAdd.description" style="width: 100%"></el-input>
                                    </el-form-item>
                                </el-col>


                            </el-row>
                            <el-row>
                                <el-col :span=12>
                                    <el-form-item label="链接" prop="href">
                                        <el-input v-model="formAdd.href" style="width: 100%"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span=12>
                                    <el-form-item label="请求方法" prop="methodType">
                                        <el-select v-model="formAdd.methodType" placeholder="请选择">
                                            <el-option
                                                    key="GET"
                                                    label="GET"
                                                    value="GET">
                                            </el-option>
                                            <el-option
                                                    key="POST"
                                                    label="POST"
                                                    value="POST">
                                            </el-option>
                                            <el-option
                                                    key="DELETE"
                                                    label="DELETE"
                                                    value="DELETE">
                                            </el-option>
                                            <el-option
                                                    key="PUT"
                                                    label="PUT"
                                                    value="PUT">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                </el-col>

                            </el-row>

                            　
                            <el-row>


                                <el-col :span=12>
                                    <el-form-item label="图标" prop="icon">
                                        <el-input v-model="formAdd.icon" style="width: 80%"></el-input>
                                        <el-button slot="append" icon="el-icon-thumb"
                                                   @click="openIconsDialog(formAdd.icon)">
                                            选择
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col :span=12>
                                    <el-form-item label="排序号" prop="sequence">
                                        <el-input v-model="formAdd.sequence" style="width: 100%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item>
                                <el-button type="primary" @click="submitFormAdd('formAdd')">保存</el-button>
                                <el-button type="primary" @click="handleDelete">删除</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <!--reeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" /-->
        <icons-dialog :visible.sync="iconsVisible" :current="currentIconModel" @select="setIcon"/>
        <div v-if="selectDialogVisible">
        <select-dialog  url="/gateway/auth/common/getSelectTree" title="选择父资源" :selectIds="[parentId]" :DialogVisible="selectDialogVisible"   @on-dialog-change="onDialogChange"></select-dialog>
        </div>
    </section>
</template>
<style>

</style>
<script>
    import {AjaxByAll} from '@/api/api';
    import IconsDialog from '@/views/common/IconsDialog'

    import selectDialog from '@/views/common/selectDialog.vue';
    export default {
        data() {

            return {
                selectDialogVisible:false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                treeData: [],

                dialogFormVisibleAdd: false,
                labelPosition: 'left',
                formAdd: {

                    id: null,
                    code: null,
                    name: null,
                    icon: null,
                    resourceType: null,
                    parentId: null,
                    parentName: null,
                    href: null,
                    description: null,
                    sequence: null,
                    frontRoute: null,
                    methodType: null,
                },
                iconsVisible: false,
                currentIconModel: null,

                currentId: "-1",
                currentName: "",
                dialogAddOrEdit: '',
                searchKey: null,
                filterText: '',
                formAddRules: {
                    name: [
                        {required: true, message: '请填写名称', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入 编码', trigger: 'blur'}
                    ],
                }
            }
        },

        methods: {
            selectDialog() {
                this.selectDialogVisible = true;

            },
            onDialogChange(val) {
                this.selectDialogVisible = val.visible;
                if (val.checkedId != '') {
                    this.formAdd.parentId = val.checkedId;
                    this.formAdd.parentName = val.checkedName;
                } else {
                    this.formAdd.parentId = null;
                    this.formAdd.parentName =null;
                }

            },
            openIconsDialog(model) {
                this.iconsVisible = true
                this.currentIconModel = model
            },
            setIcon(val) {
                this.activeData[this.currentIconModel] = val
            },
            getTreeDataList() {
                let self = this;
                let form = {
                    keyword: self.searchKey,
                    projectCode: self.projectCode,
                };
                let urls = 'gateway/auth/resource/resourceTree';
                AjaxByAll('post', urls, form).then(data => {
                    if (data.code === 200) {

                        self.treeData = data.data;
                    }

                });
            },
            openDialog(id) {


                this.dialogAddOrEdit = '编辑系统菜单';
                let urls = 'gateway/auth/resource/' + id;
                let method = 'get';
                let form = {};
                AjaxByAll(method, urls, form).then(data => {
                    if (data.code === 200) {
                        this.formAdd = data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                });

                this.dialogFormVisibleAdd = true;
            },
            openRootDialog() {
                this.currentId = null;
                this.currentName = null;
                this.openAddDialog()
            },

            openAddDialog() {
                this.dialogAddOrEdit = '新建系统菜单';

                this.dialogFormVisibleAdd = true;
                this.resetForm();
            },

            filterNode(value, data) {

                if (!value) return true;

                return data.name.indexOf(value) !== -1;
            },
            getNodeData(data) {
                this.openDialog(data.id);
                this.currentId = data.id;
                this.currentName = data.name;
            },
            submitFormAdd(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let form = this.formAdd;
                        let urls = 'gateway/auth/resource/';
                        let method =  'post'  ;
                        AjaxByAll(method, urls, form).then(data => {
                            if (data.code === 200) {
                                this.formAdd.id = data.data.id;
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });

                                this.getTreeDataList();
                            } else {
                                this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                            this.dialogFormVisibleAdd = !this.dialogFormVisibleAdd;
                        });


                    } else {
                        this.$message({
                            message: '校验失败',
                            type: 'error'
                        });
                    }
                });
            },
            handleDelete() {
                this.$confirm('确认移除吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    AjaxByAll('delete', 'gateway/auth/resource/' + this.currentId, null).then(data => {
                        if (data.code === 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getTreeDataList();
                            this.dialogFormVisibleAdd = false;
                        } else {
                            this.$message({
                                message: '操作失败：' + data.msg,
                                type: 'error'
                            });
                        }

                    });
                }).catch(() => {

                });
            },
            resetForm() {

                this.formAdd = {
                  
                    id: null,
                    code: null,
                    name: null,
                    icon: null,
                    resourceType: null,
                    parentId: this.currentId,
                    parentName: this.currentName,
                    href: null,
                    description: null,
                    sequence: null,
                    frontRoute: null,
                    methodType: null,

                };
            }
        },
        watch: {
            filterText(val) {
                this.$refs.menuTree.filter(val);
            }
        },
        created() {

        },
        mounted: function () {
            this.getTreeDataList();
        }, components: {
            //TreeNodeDialog,
            IconsDialog,
            selectDialog,
        },
    }
</script>
<style>
    .node-icon {
        color: #bebfc3;
    }
</style>
